html,
body {
  background: papayawhip;
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  padding: 10px 30px;
  border: 1px solid black;
  text-align: center;
  overflow: hidden;
}
.box span {
    display: inline-block;
  font-size: 30px;
  line-height: 50px;
  font-weight: 800;
  color: blue;
  transition: .5s;
}
.box span:nth-child(odd){
    transform: translateY(-100%);
}
.box span:nth-child(even){
    transform: translateY(100%);
}
.box span::before{
    content: attr(data-text);
    position: absolute;
    color: red;
}
.box span:nth-child(odd)::before{
    transform: translateY(100%);
}
.box span:nth-child(even)::before{
    transform: translateY(-100%);
}
.box:hover span{
    transform: translateY(0)
}
